<template>
    <h1>todoList</h1>
    <div>
        <TodoInpute @add-item="addItem"></TodoInpute>
        <TodoTab :datalist="dataList"></TodoTab>
        <TodoBody :datalist="dataList" @done="done" @delete-item="deleteItem"></TodoBody>
    </div>
</template>

<script>
import TodoInpute from './TodoInpute.vue'
import TodoBody from './TodoBody.vue'
import {reactive,ref,toRefs,provide} from 'vue'
import TodoTab from './TodoTab.vue'
export default {
    setup (props,context) {
        // console.log('props==>',props,context)
        let id=ref(3);
        let dataList=reactive([
                {id:1,text:"vue 学习",done:false},
                {id:2,text:"小程序学习",done:false}
            ]);
        const addItem=(text)=>{
            dataList.push({
                id:id.value,
                text,
                done:false
            });
            id.value++;
        }
        const deleteItem=(id)=>{
            // console.log('remove-->',id);
            // dataList.state=toRefs([...dataList.state.filter(t=>t.id!=id)]);
            // console.log(dataList.state);
            // console.log(dataList);
            // dataList.splice(,1);
            let index=0;
                dataList.map((t,i)=>t.id==id?index=i:0)
                dataList.splice(index,1);
            
        }
        let done=(id)=>{
            let index=0;
            let mydone=dataList.find((t,i)=>{ 
                if(t.id==id) {index=i; return true}
                
            });
            console.log(mydone);
            dataList.splice(index,1,{...mydone,done:!mydone.done})
        }
        provide('changedone',done);
        provide("deleteItem",deleteItem)
        return {
            dataList,
            addItem,
            deleteItem,
            done
        }
    },
    components:{
    TodoInpute,
    TodoBody,
    TodoTab
}
}
</script>

<style lang="scss" scoped>

</style>